import React, { Component } from 'react';

//导入组件
import Header from './commonality/Header';
import Search from './commonality/Search';
// import Leftnav from './cate/Leftnav';

//导入接口
import { catestair, catesecond } from '../api/api.js'

//样式文件
import '../styles/cate.scss'

class Cate extends Component {
    constructor(props) {
        super(props)
        this.state = {
            liststair: '',
            stairindex: 0,
            stairid: 225510,
            listsecond: '',
            secondindex: 0,
        }
    }

    //打印函数
    log() {
        console.log(this.state.listsecond);
    }


    //挂载后
    componentDidMount() {
        //一级分类
        catestair().then((res) => {
            console.log(res.data);
            this.state.liststair = [...res.data.list]
            this.setState({})
        })
        this.catesecond_list(this.state.stairid)
    }

    // componentWillMount(){

    //2级数据请求
    catesecond_list(id) {
        catesecond({ id }).then((res) => {
            console.log(res.data);
            this.setState({ listsecond: res.data.subcate.subcategory })
        })
    }



    // 点击事件
    handerclick(item, index) {
        console.log(item);
        this.setState({ stairindex: index, stairid: item.id })
        this.catesecond_list(item.id)
    }


    //渲染一级列表
    for_list(list) {
        if (list) {
            return list.map((item, index) => {
                return (
                    <div className={'item ' + (this.state.stairindex == index ? 'stair' : '')} key={index} onClick={() => { this.handerclick(item, index) }}> {item.name} </div>
                )
            })
        }
    }

    //渲染2级
    sceondlist(list) {
        if (list) {
            return list.map((item, index) => {
                return (
                    <div className="sceond" key={index}>
                        <h2>{item.name}</h2>
                        <div className="sceondlist">
                            { this.threelist(item.subNavs) }
                        </div>
                    </div>
                )
            })
        }
    }

    // 渲染3级
    threelist(list) {
        if (list) {
            return list.map((item, index) => {
                return (
                    <div className="three" key={index}>
                        <img src={item.pic} alt="" />
                        <div className="text"> {item.name} </div>
                    </div>
                )
            })
        }
    }



    render() {
        return (
            <div className='cate'>
                <Header brackgrondColor="#fff" color="#fff" fontSize="20px" fontWeight="400"> 分类 </Header>
                <Search></Search>
                <main>
                    <div className="leftnav">
                        {
                            this.for_list(this.state.liststair)
                        }
                    </div>
                    <div className="rightlist">
                        {
                            this.sceondlist(this.state.listsecond)
                        }
                    </div>
                </main>
            </div>
        );
    }
}

export default Cate;